<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
<!--    <link href="WEB-INF/lib/jquery-3.6.0.min.js">-->
</head>
<body>

<input type="button" value="获取数据" onclick="getData()">

<div id="div1"></div>

</body>
<script>
    function getData(){
        //1. 创建XMLHttpRequest
        var xmlHttpRequest  = new XMLHttpRequest();

        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://localhost:8080/recruitInfo');
        xmlHttpRequest.send();//发送请求

        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
                if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
                    // 将获取到的JSON数组转换为JavaScript对象
                    var jsonArray = JSON.parse(xmlHttpRequest.responseText);
                    // 遍历JavaScript对象
                    for (var i = 0; i < jsonArray.length; i++) {
                        var obj = jsonArray[i];
                        console.log(jsonArray[0].password);
                        // 获取属性和值
                        for (var key in obj) {
                            if (obj.hasOwnProperty(key)) {
                                console.log(key + ': ' + obj[key]);

                            }
                        }
                    }
                }
            }}




        // var xhr = new XMLHttpRequest();
        // xhr.open('GET', 'url', true);
        // xhr.onreadystatechange = function() {
        //     if (xhr.readyState === 4 && xhr.status === 200) {
        //         // 将获取到的JSON数组转换为JavaScript对象
        //         var jsonArray = JSON.parse(xhr.responseText);
        //         // 遍历JavaScript对象
        //         for (var i = 0; i < jsonArray.length; i++) {
        //             var obj = jsonArray[i];
        //             // 获取属性和值
        //             for (var key in obj) {
        //                 if (obj.hasOwnProperty(key)) {
        //                     console.log(key + ': ' + obj[key]);
        //                 }
        //             }
        //         }
        //     }
        // };
        // xhr.send();

















        // }
        // $.ajax({
        //     type : "get",
        //     url : "user1/show?userName="+userName,
        //     dataType : "json",
        //     success : function(data){
        //         if (data != null){
        //             //将用户信息显示在页面中
        //             var newData = JSON.stringify(data,null,4);
        //             var show = document.getElementById('show');
        //             show.innerHTML=newData;
        //             document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
        //         }
        //     }
        // });


    }
</script>
</html>